<template>
    <div >
        <basic-container>
            <el-form ref="formSearch" :model="formSearch" label-width="100px" size="small" :inline="true">
                <el-form-item>
                    <el-button type="primary" size="small" @click.stop="handleAdd()">添加</el-button>
                </el-form-item>
                <el-form-item label="聘用状态:">
                    <el-select v-model="formSearch.stutas" placeholder="聘用状态" style='width:100px'>
                        <el-option label="全部" :value="-1"></el-option>
                        <el-option label="在聘" :value="0"></el-option>
                        <el-option label="解聘" :value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="性别:">
                    <el-select v-model="formSearch.sex" placeholder="性别" style='width:100px'>
                        <el-option label="全部" :value="-1"></el-option>
                        <el-option label="男" :value="0"></el-option>
                        <el-option label="女" :value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="学历:">
                    <el-select v-model="formSearch.educationalLevel">
                        <el-option v-for='v in education' :key='v.id' :label="v.name" :value="v.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="formSearch.name" placeholder="请输入姓名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchFormSubmit()">搜索</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button @click="handleReset()">重置</el-button>
                </el-form-item>
            </el-form>
            <!-- 表格 -->
            <avue-crud :option="tableOption" :data="tableData" :table-loading="tableLoading" :page="page" ref="crud" @current-change='currentChange' @size-change="sizeChange">
                <!-- <template slot-scope="scope" slot="handleTime">
                    {{scope.row.status==1?'未留样':'已留样'}}
                </template> -->
                <template slot-scope="scope" slot="menu">
                    <el-button type="primary" size="small"  plain @click.stop="handleEdit(scope.row,scope.index)">修改</el-button>
                    <el-button type="primary" size="small"  plain @click.stop="handleDelete(scope.row,scope.index)">删除</el-button>
                </template>
            </avue-crud>
        </basic-container>
        <!-- 修改/新增-->
        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="50%" class="member" >
            <el-form ref="dialogForm"  :model="dialogForm" :rules="rules"    label-position="left" label-width="110px" size="mini" >
                <el-row >
                    <el-col :span='11'>
                        <el-form-item label="姓名：" prop='name'>
                            <el-input v-model="dialogForm.name" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item label="性别：" prop='sex'>
                            <el-radio-group v-model="dialogForm.sex">
                                <el-radio :label="0" value='0'>男</el-radio>
                                <el-radio :label="1" value='1'>女</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="身份证：" prop='identityCard'>
                            <el-input v-model="dialogForm.identityCard" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item label="学历:" prop='educationalLevel'>
                            <el-select v-model="dialogForm.educationalLevel" style="width:100%">
                                <el-option v-for='v in educationS' :key='v.id' :label="v.name" :value="v.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span='11' :offset="2">
                        <el-form-item label="照片："  prop="picture">
                            <!--<el-upload :action="actionUrl"  :headers="uploadHeaders" name="file" :show-file-list="false" accept="image/*"
                            :on-success="uploadSuccess" :on-error="uploadError"    class="avatar-uploader">
                                <img v-if="dialogForm.url" :src="dialogForm.url" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>-->
                            <el-upload
                                    :action="actionUrl"
                                    :headers="uploadHeaders"
                                    name="file"
                                    :show-file-list="false"
                                    accept="image/*"
                                    :on-success="uploadSuccess"
                                    :on-error="uploadError"
                                    class="avatar-uploader"
                            >
                                <img v-if="dialogForm.picture"
                                        :src="dialogForm.picture"
                                        class="avatar"
                                        width="165px"
                                        height="210px"
                                        style="object-fit: cover;"
                                />
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col :span='11'>
                        <el-form-item label="专业：" prop='major'>
                            <el-input v-model="dialogForm.specialty" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                     <el-col :span='11' :offset="2">
                        <el-form-item label="职称：" >
                            <el-input v-model="dialogForm.profession" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span='11'>
                        <el-form-item label="毕业学校：" prop='graduateSchool'>
                            <el-input v-model="dialogForm.graduateSchool" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                     <el-col :span='11' :offset="2">
                        <el-form-item label="毕业日期："  prop="graduationTime">
                             <el-date-picker v-model="dialogForm.graduationTime" type="date" placeholder="选择日期" style="width:100%"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span='11'>
                        <el-form-item label="联系手机：" prop='mobile'>
                            <el-input v-model="dialogForm.mobile" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span='11' :offset="2">
                        <el-form-item label="邮箱：" prop='email'>
                            <el-input v-model="dialogForm.email" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span='11'>
                        <el-form-item label="紧急联系人：" prop='emergencyContact'>
                            <el-input v-model="dialogForm.emergencyContact" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span='11' :offset="2">
                        <el-form-item label="联系手机：" prop='contactNumber'>
                            <el-input v-model="dialogForm.contactNumber" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span='24'>
                        <el-form-item label="居住地址：" prop='residentialAddress'>
                            <el-input v-model="dialogForm.residentialAddress" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span='11' >
                        <el-form-item label="聘用时间："  prop="hiringTime">
                             <el-date-picker v-model="dialogForm.hiringTime" type="date" placeholder="选择日期" style="width:100%"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span='11'  :offset="2">
                        <el-form-item label="月薪（元）："  prop="monthlySalary">
                             <el-input v-model="dialogForm.monthlySalary" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span='24' >
                        <el-form-item label="其他福利：" >
                             <el-input v-model="dialogForm.otherWelfare"  type="textarea" :autosize='{ minRows: 3, maxRows: 6}' placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span='11' >
                        <el-form-item label="聘用状态：" prop='status'>
                            <el-radio-group v-model="dialogForm.status">
                                <el-radio :label="0" :value='0'>在聘</el-radio>
                                <el-radio :label="1" :value='1'>解聘</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align:center">
                <el-button size="small"  @click="dialogFormVisible = false">关 闭</el-button>
                <el-button size="small" type="primary" @click="handleAddLine('dialogForm')">确 认</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { listOption } from "@/const-personal/projectManage/outsideStaff.js"
    import { getOutPutBankListOfSearch,getOutPutBank,addOutPutBank,updOutPutBank ,delOutPutBank} from "@/api/progec/outsideStaff"
    import { validateAcquaintance,checkPhone,validcardid,validEmail,validatenull } from "@/util/validate.js"
    import { getToken } from "@/util/auth";
    import { formatDate } from '@/util/util'
    import website from "@/const/website";
    export default {
        name: "outsideStaff",
        data() {
            return {
                formSearch:{
                    stutas:-1,
                    sex:-1,
                    educationalLevel:-1,
                    name:''
                },
                education:[
                    {id:-1,name:'全部'},
                    {id:0,name:'高中及以下'},
                    {id:1,name:'中专'},
                    {id:2,name:'大专'},
                    {id:3,name:'本科'},
                    {id:4,name:'硕士'},
                    {id:5,name:'博士'},
                    {id:6,name:'其他'},
                ],
                educationS:[
                    {id:0,name:'高中及以下'},
                    {id:1,name:'中专'},
                    {id:2,name:'大专'},
                    {id:3,name:'本科'},
                    {id:4,name:'硕士'},
                    {id:5,name:'博士'},
                    {id:6,name:'其他'},
                ],
                tableOption:listOption,
                tableData:[],//数据
                page: {
                    total: 10, //总页数
                    currentPage: 1, //当前页数
                    pageSize: 10, //每页显示多少条
                    pageSizes: [5,10,20]
                },
                tableLoading:false,
                 // 修改/新增
                dialogTitle:'人员添加',
                dialogFormVisible:false,
                dialogForm:{
                    id:'',
                    name:'',
                    sex:null,
                    identityCard:null,
                    educationalLevel:null,
                    specialty:'',
                    graduateSchool:'',
                    graduationTime:'',
                    mobile:'',
                    email:'',
                    emergencyContact:'',
                    contactNumber:'',
                    residentialAddress:'',
                    hiringTime:'',
                    monthlySalary:"",
                    status:'',
                    picture:''
                },
                rules:{
                    name:[{required: true,message: '姓名不能为空',trigger: 'change'}],
                    sex:[{required: true,message: '请选择性别',trigger: 'change'}],
                    identityCard:[{required: true,validator: validcardid,trigger: 'change'}],
                    educationalLevel:[{required: true,message: '请选择学历',trigger: 'change'}],
                    specialty:[{required: true,message: '专业不能为空',trigger: 'change'}],
                    graduateSchool:[{required: true,message: '毕业院校不能为空',trigger: 'change'}],
                    graduationTime:[{required: true,message: '毕业时间不能为空',trigger: 'change',type:'date'}],
                    mobile:[{required: true,validator: checkPhone,trigger: 'blur'}],
                    email:[{required: false,validator: validEmail,trigger: 'blur'}],
                    emergencyContact:[{required: true,message: '紧急联系人姓名不能为空',trigger: 'change'}],
                    contactNumber:[{required: true,validator: checkPhone,trigger: 'blur'}],
                    residentialAddress:[{required: true,message: '居住地址不能为空',trigger: 'change'}],
                    hiringTime:[{required: true,message: '聘用时间不能为空',trigger: 'change',type:'date'}],
                    monthlySalary:[{required: true,validator: validateAcquaintance,trigger: 'blur'}],
                    status:[{required: true,message: '请选择聘用状态',trigger: 'change'}],
                },
                // 上传图片
                actionUrl: `${website.axiosUrl}/externalPersonnel/v1/insert/upload`,
                uploadHeaders: {
                    Authorization: getToken()
                },
                fileList: [],
            }
        },
        mounted () {
            this.searchFormSubmit()
        },
        methods:{
            // 点击搜索
            searchFormSubmit(){
                let data = {
                    size : this.page.pageSize,
                    page : this.page.currentPage,
                    sex: this.formSearch.sex == -1 ? null : this.formSearch.sex,
                    name: this.formSearch.name,
                    status: this.formSearch.stutas == -1 ? null : this.formSearch.stutas,
                    educationalLevel: this.formSearch.educationalLevel == -1 ? null : this.formSearch.educationalLevel,
                }
                getOutPutBankListOfSearch(data).then(res =>{
                    if(res.data.code==200){
                        this.tableData = res.data.data.list;
                        this.page.total = res.data.data.total;
                        this.page.currentPage = res.data.data.pageNum;
                        this.page.pageSize = res.data.data.pageSize;
                    } else {
                        this.$notify.error({ title: '查询失败', message: '获取列表失败！', type: 'danger', });
                    }
                })
            },
            // 点击重置
            handleReset(){
                this.formSearch = { stutas:-1,sex:-1,educationalLevel:-1,name:'' }
            },
            currentChange(page){
                this.page.currentPage = page;
                this.searchFormSubmit();
            },
            //分页大小
            sizeChange(val){
                this.page.pageSize = val;
                this.searchFormSubmit();
            },
            handleAdd(){
                this.dialogFormVisible=true;
                this.dialogTitle='人员添加';
                this.dialogForm={
                    id:'',
                    name:'',
                    sex:null,
                    identityCard:null,
                    educationalLevel:null,
                    specialty:'',
                    graduateSchool:'',
                    graduationTime:'',
                    mobile:'',
                    email:'',
                    emergencyContact:'',
                    contactNumber:'',
                    residentialAddress:'',
                    hiringTime:'',
                    monthlySalary:"",
                    status:'',
                    picture:''
                }
            },
            // 修改
            handleEdit(row,index){
                this.dialogFormVisible=true;
                this.dialogTitle='人员信息修改';
                this.dialogForm = row;
                this.dialogForm.hiringTime = new Date(row.hiringTime)
                this.dialogForm.graduationTime = new Date(row.graduationTime)
            },
            // 删除
            handleDelete(row,index){
                this.$confirm('删除后，将无法找回, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //请求-删除
                    delOutPutBank(row.id).then(res => {
                        if(res.data.code==200){
                            this.$notify({ title: '操作成功', type: 'success', message: '已成功删除（'+row.name+'）!'});
                            this.dialogFormVisible = false;
                            this.searchFormSubmit()
                        } else {
                            this.$notify.error({ title: '操作失败', message: res.data.message, type: 'danger', });
                        }
                    })
                }).catch(() => {
                    this.$notify({ title: '已取消删除', type: 'info', });
                });
            },
            // 确认新增/修改
            handleAddLine(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.dialogForm.hiringTime = this.$moment(this.dialogForm.hiringTime).format("YYYY-MM-DD")
                        this.dialogForm.graduationTime = this.$moment(this.dialogForm.graduationTime).format("YYYY-MM-DD")
                        if(validatenull(this.dialogForm.id)){
                            addOutPutBank(this.dialogForm).then(res =>{
                                if(res.data.code==200){
                                    this.$notify({ title: '操作成功', type: 'success', message: '已成功添加成员!'});
                                    this.dialogFormVisible = false;
                                    this.$refs[formName].resetFields();
                                    this.searchFormSubmit();
                                } else {
                                    this.$notify.error({ title: '操作失败', message: res.data.message, type: 'danger' });
                                }
                            })
                        } else {
                            updOutPutBank(this.dialogForm).then(res =>{
                                if(res.data.code==200){
                                    this.$notify({ title: '操作成功', type: 'success', message: '已成功修改成员!'});
                                    this.dialogFormVisible = false;
                                    this.$refs[formName].resetFields();
                                    this.searchFormSubmit();
                                } else {
                                    this.$notify.error({ title: '操作失败', message: res.data.message, type: 'danger' });
                                }
                            })
                        }
                    }
                })
            },
            // 图片上传成功
			uploadSuccess(response, file) {
				if (response.code === 200) {
                    this.dialogForm.picture = website.axiosUrl + response.data.url;
                    this.$message.success("图片上传成功");
				} else {
					this.$message.error(response.message);
				}
			},
			// 图片上传失败
			uploadError(err, file) {
				console.log(err)
			}
        }
    }
</script>

<style >
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 165px;
    height: 165px;
    line-height: 165px;
    text-align: center;
}
.member .el-dialog{
    min-width: 665px
}
</style>